<template>
  <div class="mod-config">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @click="dataFormSubmit()"
             label-width="50%">
      <el-row>
        <el-col span="5">
          <el-form-item label="单元数">
            <el-input v-model="dataForm.danyuanNumber" placeholder="请输入单元数" @blur="danyuan()"></el-input>
          </el-form-item>
        </el-col>
        <el-col span="5">
          <el-form-item label="单元房间数">
            <el-input v-model="dataForm.houseNumber" placeholder=""></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="楼层数">
            <el-input v-model="dataForm.loucengNumber" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col span="5">
          <el-form-item label="栋号">
            <el-input v-model="dataForm.dongId" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row label-width="10%">
        <el-col span="5">
          <el-form-item label="所属小区">
            <el-input v-model="dataForm.name" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
        <el-col span="5">
          <el-form-item label="一单元户型" v-show="dataForm.show[0]">
            <el-select v-model="dataForm.huxing1"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>

        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="一单元面积" v-if="dataForm.show[0]">
            <el-input v-model="dataForm.suqaare[0]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="二单元户型" v-show="dataForm.show[1]">
            <el-select v-model="dataForm.huxing2"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="二单元面积" v-if="dataForm.show[1]">
            <el-input v-model="dataForm.suqaare[1]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="三单元户型" v-show="dataForm.show[2]">
            <el-select v-model="dataForm.huxing3"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="三单元面积" v-if="dataForm.show[2]">
            <el-input v-model="dataForm.suqaare[2]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="四单元户型" v-show="dataForm.show[3]">
            <el-select v-model="dataForm.huxing4"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="四单元面积" v-if="dataForm.show[3]">
            <el-input v-model="dataForm.suqaare[3]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="五单元户型" v-show="dataForm.show[5]">
            <el-select v-model="dataForm.huxing5"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="五单元面积" v-if="dataForm.show[5]">
            <el-input v-model="dataForm.suqaare[5]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="六单元户型" v-show="dataForm.show[5]">
            <el-select v-model="dataForm.huxing6"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="六单元面积" v-if="dataForm.show[5]">
            <el-input v-model="dataForm.suqaare[5]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="七单元户型" v-show="dataForm.show[6]">
            <el-select v-model="dataForm.huxing7"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="七单元面积" v-if="dataForm.show[6]">
            <el-input v-model="dataForm.suqaare[6]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="5">
          <el-form-item label="八单元户型" v-if="dataForm.show[7]">
            <el-select v-model="dataForm.huxing8"  placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col span="2">
          <span> &nbsp</span>
        </el-col>
        <el-col span="3">
          <el-form-item label="八单元面积" v-if="dataForm.show[7]">
            <el-input v-model="dataForm.suqaare[7]" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false" style="margin-left: 160px">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" style="margin-left: 50px">确定</el-button>
    </span>
  </div>
</template>

<script>
  export default {
    data () {
      /*let isIn8 = (rule, value, callback) => {
        const r = /[1-8]$/
        ifr.test(value)

      }*/

      return {

        options: [{
          value: '两室一厅',
          label: '两室一厅'
        }, {
          value: '三室一厅',
          label: '三室一厅'
        }, {
          value: '三室两厅',
          label: '三室两厅'
        }, {
          value: '四室两厅',
          label: '四室两厅'
        },  {
          value: '五室三厅',
          label: '五室三厅'
        },{
          value: '其他',
          label: '其他'
        }],


        dataForm: {
          show: [false, false, false, false, false, false, false, false],
          danyuanNumber: undefined,
          huxing1: '',
          huxing2: '',
          huxing3: '',
          huxing5: '',
          huxing5: '',
          huxing6: '',
          huxing7: '',
          huxing8: '',
          houseNumber: '',
          suqaare: [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined],
          loucengNumber: '',
          name: '',
          dongId: ''
        },
        dataRule: {
          danyuanNumber: [
            {required: true, message: '数字', trigger: 'bulr'}
            /*{validator: isIn8, trigger: 'bulr'}*/
          ]
        }
      }
    },
    methods: {
      // 表单提交
      isshow: function () {
        return true
      },
      danyuan: function () {
        // eslint-disable-next-line no-unused-vars
        let dan = this.dataForm.danyuanNumber
        for (let i = 0; i < dan; i++) {
          this.dataForm.show[i] = true
        }
        for (let j = 7; j >= dan; j--) {
          this.dataForm.show[j] = false
        }
        console.log(this.dataForm.show[5])
        console.log(this.dataForm.show[7])
        console.log(this.dataForm.show[1])
        console.log(this.dataForm.danyuanNumber)
      },
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/generator/house/saveall`),
              method: 'post',
              data: this.$http.adornData({
                'danyuanNumber': this.dataForm.danyuanNumber,
                'huxing': [this.dataForm.huxing1, this.dataForm.huxing2, this.dataForm.huxing3, this.dataForm.huxing5, this.dataForm.huxing5, this.dataForm.huxing6, this.dataForm.huxing7, this.dataForm.huxing8],
                'houseNumber': this.dataForm.houseNumber,
                'suqaare': this.dataForm.suqaare,
                'loucengNumber': this.dataForm.loucengNumber,
                'name': this.dataForm.name,
                'dongId': this.dataForm.dongId
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,

                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
